<script setup>
import { computed } from "vue";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
  size: {
    type: String,
    default: "default",
  },
  isFullScreen: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["close", "update:visible"]);

const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => {
    emits("update:visible", val);
  },
});
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    class="dialog dialog-animation"
    :class="isFullScreen ? 'fullscreen' : size"
    :close-on-click-modal="false"
    :fullscreen="isFullScreen"
    @close="
      () => {
        emits('close');
      }
    "
  >
    <template #header>
      <div
        class="dialog_title jb p75"
        :class="isFullScreen ? 'size40' : 'size30'"
      >
        {{ props.title }}
        <slot name="header"></slot>
      </div>
    </template>
    <slot></slot>
  </el-dialog>
</template>

<style lang="less">
// 全局修改关闭按钮样式
.el-dialog__headerbtn .el-dialog__close,
.el-dialog__headerbtn:focus .el-dialog__close,
.el-dialog__headerbtn:hover .el-dialog__close {
  opacity: 0;
}

@keyframes dialog-fade-in {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 进入的过渡效果 */
.dialog-animation {
  animation: dialog-fade-in 1s ease-in;
}

.dialog {
  position: absolute;
  z-index: 999999;
  margin: 0;
  padding: 0;
  .dialog_title {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  }
}

.default {
  // width: 67.7%;
  // height: 74%;
  width: 68.75rem;
  height: 42.4375rem;
  left: 22%;
  top: 18%;
  background: url("@/assets/images/dialogBg.png") no-repeat;
  background-size: cover;
  background-position: center;
  .el-dialog__header {
    padding: 0;
    height: 9%;
  }
  .el-dialog__body {
    height: 91%;
  }
}

.mini {
  width: 51.875rem;
  height: 32rem;
  left: 28%;
  top: 24%;
  background: url("@/assets/images/miniDialogBg.png") no-repeat;
  background-size: cover;
  background-position: center;
  .el-dialog__header {
    padding: 0;
    height: 11%;
  }
  .el-dialog__body {
    height: 89%;
  }
}

.large {
  width: 67.7%;
  height: 74%;
  left: 16.1%;
  top: 13%;
  background: url("@/assets/images/bgggggggg.png") no-repeat;
  background-size: cover;
  background-position: center;
  .el-dialog__header {
    padding: 0;
    height: 8%;
  }
  .el-dialog__body {
    height: 92%;
  }
}

.fullscreen {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: url("@/assets/images/fullDialogBg.png") no-repeat;
  background-size: 100% 100%;
  background-position: center;
  .el-dialog__header {
    padding: 0;
    height: 8%;
  }
  .el-dialog__body {
    height: 92%;
  }
}

.size30 {
  font-size: 1.875rem;
}

.size40 {
  font-size: 45px;
}

.jb {
  font-weight: bold;
  /* 调整为更亮的浅蓝色 */
  background: linear-gradient(to bottom, #ffffff, #92deff);
  -webkit-background-clip: text;
  color: transparent;
  background-clip: text;
  display: inline-block;
}

.p75 {
  font-family: "P75";
}
</style>
